<template>
  <a-table :columns="columns" :data-source="materialList" rowKey="id" :pagination="false" :loading="loading">
    <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
    <span slot="name" slot-scope="text, record">
      <span v-if="record.require == 3200" style="color: red">*</span> {{ text }}
    </span>
    <span slot="describe" slot-scope="text">
      <a-popover>
        <template slot="content">
          <div style="max-width: 900px">{{ text }}</div>
        </template>
        <div class="line">{{ text }}</div>
      </a-popover>
    </span>
    <span slot="fileList" slot-scope="list, record">
      <div v-if="list && list.length">
        <a v-for="(item, index) in list" :key="item.id" class="file-css" @click="openReview(record, index)">
          <a-icon v-if="item.isread == 3200" type="folder-open" theme="filled" />
          <a-icon v-else type="folder" theme="filled" />
          {{ item.name }}</a
        >
      </div>
      <div v-else>未上传附件</div>
    </span>
  </a-table>
</template>
<script>
import { queryThirdPersonMaterial } from '@/api/apply/apl_matter_attach'
import { kkfilePreview } from '@/utils/util.js'
export default {
  props: {
    applyid: {
      // 申请id
      type: String,
      required: true
    }
  },
  data () {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'serial',
          key: 'serial',
          align: 'center',
          width: '70px',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '材料名称',
          dataIndex: 'name',
          key: 'name',
          width: '30%',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '材料说明',
          dataIndex: 'describe',
          width: '40%',
          key: 'describe',
          scopedSlots: { customRender: 'describe' }
        },
        {
          title: '附件信息',
          dataIndex: 'fileList',
          key: 'fileList',
          scopedSlots: { customRender: 'fileList' }
        }
      ],
      materialList: [],
      loading: true
    }
  },
  created () {
    this.queryList(this.applyid)
  },
  methods: {
    async queryList (applyid) {
      const { data } = await queryThirdPersonMaterial(applyid).finally(() => {
        this.loading = false
      })
      this.materialList = data || []
    },
    // 查看
    openReview (record, index) {
      const file = record.fileList[index]
      if (!file.url) {
        this.$message.error('未找到附件预览路径')
      }
      window.open(kkfilePreview(file.url))
    }
  }
}
</script>

<style lang="scss" scoped></style>
